<template>
	<view class="my-bank-card">
		<view class="each-line">
			<text class="label">持卡人</text>
			<input class="no-input" v-model="authInfo.accName" :disabled="disabled" type="text" placeholder="请输入持卡人" />
		</view>
		<view class="each-line">
			<text class="label">身份证号</text>
			<input class="no-input" v-model="authInfo.idCard" :disabled="disabled" type="text" placeholder="请输入身份证号" />
		</view>
		<view class="each-line">
			<text class="label">结算卡号</text>
			<input class="no-input" v-model="authInfo.accNo" type="text" placeholder="请输入结算卡号" />
		</view>
		<view class="each-line">
			<text class="label">结算银行</text>
			<input class="no-input" @tap="bankShow = true" v-model="authInfo.bankName" type="text" placeholder="请选择结算银行"
				:disabled="true" />
			<view class="my-ni-right" @tap="bankShow = true">
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<view class="each-line">
			<text class="label">所属省市</text>
			<input class="no-input" @tap="pcaPickerShow = true" v-model="authInfo.provinceCity" type="text"
				placeholder="请选择所属省市 " :disabled="true" />
			<view class="my-ni-right" @tap="pcaPickerShow = true">
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<view class="each-line">
			<text class="label">预留手机号</text>
			<input class="no-input" v-model="authInfo.moblie" type="text" placeholder="请输入预留手机号" />
		</view>
	
		<button class="submit-btn" type="default" @tap="submitEvent" v-if="fromPage == 'nameAuth'">实名认证</button>
			<button class="submit-btn" type="default" @tap="submitEvent" v-else>更换收款银行卡</button>
		<u-select v-model="bankShow" :list="bankList" value-name="bankCode" label-name="bankName"
			@confirm="confirmBank"></u-select>
		<u-select v-model="bankBranchShow" :list="bankBranchList" value-name="bankCode" label-name="bankName"
			@confirm="confirmBankBranch"></u-select>
		<u-select v-model="pcaPickerShow" mode="mutil-column-auto" :list="arealist" @confirm="confirmArea"></u-select>
		<u-modal v-model="show" :content="content" @confirm="Modalconfirm"  ></u-modal>
	</view>
</template>

<script>
	const api = require('../../config/api')
	const util = require('../../utils/util')
	export default {
		name: 'realAuth',
		data() {
			return {
				show:false,
				disabled: false,
				fromPage: '',
				authInfo: {
					accName: '', // 关旭
					idCard: '', // 371424199711043014
					accNo: '', // 6226221609449134
					bankName: '', // 中国民生银行
					branchBankName: ' ', //
					provinceCity: '', // 山东省济南市
					province: '', // 山东省
					city: '', // 济南市
					moblie: '', // 17753422520
					type: 'BANK' // BANK
				},
				pcaPickerShow: false,
				bankShow: false,
				bankList: [],
				bankBranchShow: false,
				bankBranchList: [],
				arealist: [],
				content:'实名认证成功'
			}
		},
		onLoad: function(options) {
			this.getsettlementList();
			this.fromPage = options.from || ''
			this.getUserInfo();

			this.getBankData()
			this.getAllPcaData()


		},
		onBackPress(options) {
			// console.log('from:' + options.from)
			if (options.from === 'navigateBack') {
				return false;
			}
			this.back()
			return true
		},
		methods: {
			Modalconfirm(){
				this.back()
			},
			async getUserInfo() {
				const res = await util.request(api.getUserInfoUrl, {}, 'POST')
				console.log(res)
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else {
					if (res.data.realName == null) {
						this.disabled = false
					} else {
						this.disabled = true
						// this.authInfo.accName = res.data.realName.realName
						// this.authInfo.idCard = res.data.realName.idCard
						// this.authInfo.moblie = res.data.realName.phone
						this.authInfo.accName = util.processName(res.data.realName.realName)
						this.authInfo.idCard = util.phoneSubstringfct(res.data.realName.idCard)
						this.authInfo.moblie = util.phoneSubstring(res.data.realName.phone)
					}

				}
			},
			async getsettlementList() {
				const res = await util.request(
					api.settlementListUrl, {

					},
					'POST'
				)
				console.log(res);
				if (res.code !== 0) {} else {

					this.authInfo = JSON.parse(res.data[0].cardInfo)
					this.authInfo.accNo = util.banknumberSubstring(JSON.parse(res.data[0].cardInfo).accNo)
					this.authInfo.provinceCity = JSON.parse(res.data[0].cardInfo).province + " " + JSON.parse(res.data[
						0].cardInfo).city
				}
			},
			back() {
				if (this.fromPage === 'nameAuth') {
					uni.navigateBack({
						delta: 2
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			getBankData() {
				util.request(api.bankListUrl, {}, 'GET').then(res => {
					console.log(res)
					if (res.code !== 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						this.bankList = res.data || []
					}
				})
			},
			confirmBank(val) {
				let currBank = val[0] || {}
				this.authInfo.bankName = currBank.label || ''
				// this.getBankBranchData()
			},
			getBankBranchData() {
				util.request(api.bankBranchListUrl, {
					bankName: this.authInfo.bankName
				}, 'GET').then(res => {
					// console.log(res)
					if (res.code !== 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						this.bankBranchList = res.data || []
					}
				})
			},
			confirmBankBranch(val) {
				let currBankBranch = val[0] || {}
				this.authInfo.branchBankName = currBankBranch.label || ''
			},
			async getAllPcaData() {
				const res = await util.request(api.pcaAreaUrl, {}, 'POST')
				// console.log(res)
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else {
					let arr = res.data || []
					arr.forEach((item) => {
						item.label = item.name
						item.value = item.code
						item.children = [...item.posCityList]
						delete item.posCityList
						item.children.forEach((item1) => {
							item1.label = item1.name
							item1.value = item1.code
						})
					})
					this.arealist = arr
				}
			},
			confirmArea(area) {
				this.authInfo.province = area[0].label
				this.authInfo.city = area[1].label
				this.authInfo.provinceCity = area[0].label + area[1].label
				this.pickerShow = false
			},
			submitEvent() {
				util.request(api.bindBankUrl, this.authInfo, 'POST').then(res => {
					console.log(res)
					if (res.code !== 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						if (this.fromPage === 'nameAuth') {
							this.show = true
						} else {
							uni.showToast({
								title: '银行卡绑定成功',
								icon: 'none'
							})
						}
						
						
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-bank-card {
		.each-line {
			display: flex;
			align-items: center;
			justify-content: normal;
			border-bottom: 1px solid #e5e5e5;
			padding: 20rpx 40rpx;

			.label {
				width: 160rpx;
			}

			.no-input {
				padding-left: 30rpx;
				flex-grow: 1;
				font-size: 28rpx;
			}

			.icon-carema {
				width: 24px;
				height: 24px;
			}
		}

		.submit-btn {
			width: 60%;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			font-size: 32rpx;
			margin-top: 80rpx;
			border: 1px solid #007aff;
			background-color: #007aff;
			border-radius: 45rpx;
		}
	}
</style>